@charset "utf-8";
/* CSS Document */
.main-t i span {  display:inline-block;}
.setView .main-t i span {}
/*.main-t i span.txt1 {
transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-moz-transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-ms-transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-o-transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-webkit-transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
transform-origin:20px -20px;
-moz-transform-origin:20px -20px;
-ms-transform-origin:20px -20px;
-o-transform-origin:20px -20px;
-webkit-transform-origin:20px -20px;
}
.main-t i span.txt2 {
transform: matrix3d(1, 3, 0, 0, 3, 5, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(60deg);
-moz-transform: matrix3d(1, 3, 0, 0, 3, 5, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(60deg);
-ms-transform: matrix3d(1, 3, 0, 0, 3, 5, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(60deg);
-o-transform: matrix3d(1, 3, 0, 0, 3, 5, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(60deg);
-webkit-transform: matrix3d(1, 3, 0, 0, 3, 5, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(60deg);
transform-origin:-10px 20px;
-moz-transform-origin:-10px 20px;
-ms-transform-origin:-10px 20px;
-o-transform-origin:-10px 20px;
-webkit-transform-origin:-10px 20px;
}
.main-t i span.txt3 {
transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-moz-transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-ms-transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-o-transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-webkit-transform: matrix3d(2, 5, 0, 0, 1, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
transform-origin:-15px -20px;
-moz-transform-origin:-15px -20px;
-ms-transform-origin:-15px -20px;
-o-transform-origin:-15px -20px;
-webkit-transform-origin:-15px -20px;
}
.main-t i span.txt4 {
transform: matrix3d(2, 2, 0, 0, 4, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-moz-transform: matrix3d(2, 2, 0, 0, 4, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-ms-transform: matrix3d(2, 2, 0, 0, 4, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-o-transform: matrix3d(2, 2, 0, 0, 4, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
-webkit-transform: matrix3d(2, 2, 0, 0, 4, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-145deg);
}
.main-t i span.txt5 {
transform: matrix3d(1, 1, 0, 0, 6, 4, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-300deg);
-moz-transform: matrix3d(1, 1, 0, 0, 6, 4, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-300deg);
-ms-transform: matrix3d(1, 1, 0, 0, 6, 4, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-300deg);
-o-transform: matrix3d(1, 1, 0, 0, 6, 4, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-300deg);
-webkit-transform: matrix3d(1, 1, 0, 0, 6, 4, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1) rotate(-300deg);
transform-origin:5px -30px;
-moz-transform-origin:5px -30px;
-ms-transform-origin:5px -30px;
-o-transform-origin:5px -30px;
-webkit-transform-origin:5px -30px;
}
.setView  .main-t i span {
transform: matrix(1, 0, 0, 1, 0, 0);
-moz-transform: matrix(1, 0, 0, 1, 0, 0);
-ms-transform: matrix(1, 0, 0, 1, 0, 0);
-o-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(1, 0, 0, 1, 0, 0); 
}*/



/*按钮-闭合*/
.hvr-shutter-in-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #000000;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-shutter-in-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f8b500;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active {
  color: #ffffff;
}
.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}


/* 按钮-展开 */
.hvr-shutter-out-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #000000;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:#f8b500;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
  color: #000000;
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Outline Out */
.outline-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.outline-out:before {
  content: '';
  position: absolute;
  border: #f8b500 solid 2px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-out:hover:before, .outline-out:focus:before, .outline-out:active:before {
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}
/* Outline Out2 */
.outline-out2 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.outline-out2:before {
  content: '';
  position: absolute;
  border: #000000 solid 2px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-out2:hover:before, .outline-out2:focus:before, .outline-out2:active:before {
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
}


.animated-a {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.flipInY {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInY;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInY;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInY;
	backface-visibility: visible !important;
	animation-name: flipInY;
}


@-webkit-keyframes float {
0%, 100% {
-webkit-transform:translate(0, 0);
transform:translate(0, 0)
}
10%, 50%, 90% {
-webkit-transform:translate(0, -3px);
transform:translate(0, -3px)
}
30%, 70% {
-webkit-transform:translate(0, 3px);
transform:translate(0, 3px)
}
}
@keyframes float {
0%, 100% {
-webkit-transform:translate(0, 0);
transform:translate(0, 0)
}
10%, 50%, 90% {
-webkit-transform:translate(0, -3px);
transform:translate(0, -3px)
}
30%, 70% {
-webkit-transform:translate(0, 3px);
transform:translate(0, 3px)
}
}
.float {
	-webkit-animation-name: float;
	animation-name: float;
	-webkit-animation-duration: 6s;
	animation-duration: 6s;-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}



@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -6deg);
            transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -6deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 6deg);
            transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 6deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -6deg);
            transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -6deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
          animation-name: tada;
		  -webkit-transform: all 1s;
	-ms-transform: all 1s;
	-o-transform: all 1s;
	transform: all 1s;

	/*animation-name: colorchange; /**这里引用了前面定义的动画**/
	-webkit-animation-duration: 1.8s;
	-o-animation-duration: 1.8s;
	animation-duration: 1.8s;
	-webkit-animation-timing-function: ease-in;
	-o-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	-webkit-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-o-animation-direction: normal;
	animation-direction: normal;/* normal：默认，从0%执行到100% | reverse：动画从100%执行到0% | alternate：动画在0%到100%之间往复执行|alternate-reverse与alternate一致，不过是从100%开始 */
	-webkit-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}